<template>
  <el-card>
    <el-row>
      <el-col :span="20">
        <el-icon>
          <Search />
        </el-icon>
        <span>搜索</span>
      </el-col>
      <el-col :span="4">
        <el-button>重置</el-button>
        <el-button type="primary" @click="search">查询搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="flex flex-v-center">
          <span>账号/用户名 ：</span><el-input v-model="queryPramas.keyword" />
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-card>
    <el-row>
      <el-col :span="23"></el-col>
      <el-col :span="1">
        <el-button type="primary" @click="add">添加</el-button>
      </el-col>
    </el-row>
  </el-card>

  <el-table :data="tableData" border>
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="username" label="账号"></el-table-column>
    <el-table-column prop="nickName" label="姓名"></el-table-column>
    <el-table-column prop="mail" label="邮箱"></el-table-column>
    <el-table-column prop="createTime" label="添加时间">
      <template #default="{ row }"
        ><span>{{ formatDate(row.createTime) }}</span></template
      >
    </el-table-column>
    <el-table-column prop="loginTime" label="最后登录">
      <template #default="{ row }"
        ><span>{{ formatDate(row.loginTime) }}</span></template
      >
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          v-permission="'allocRole'"
          link
          type="primary"
          @click="allocRole(row.id)"
          >分配角色</el-button
        >
        <el-button
          v-if="hasEditPermission"
          link
          type="primary"
          @click="edit(row.id)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="flex page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="queryPramas.pageNum"
        v-model:page-size="queryPramas.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </ElConfigProvider>
  </div>

  <!-- 用于添加和编辑用户的子组件 -->
  <EditUser :show="showEditDialog" @close="closeEditDialog" :id="editId" />
  <!-- 用户分配角色的弹出组件 -->
  <AllocRole :show="showAllocRoleDialog" :id="allocRoleId" />
</template>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { getAdminListApi } from "@/api";
import { reactive, ref, toRefs, watch } from "vue";
import { formatDate } from "@/common";
import { ElConfigProvider } from "element-plus";
import EditUser from "@/views/ums/editUser.vue";
import AllocRole from "@/views/ums/allocRole.vue";
// @ts-ignore
// import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// 如果不想使用.mjs ， 导入该ts的版本也行
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { useUserStore } from "@/store/userStore";
const userStore = useUserStore();
const hasEditPermission = userStore.permissions.includes("editUser");
const tableData = ref<Admin[]>([]);

const queryPramas = reactive<AdminListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);

let controller: AbortController;
// 使用一个变量，记录当前是否正在发送请求
let isFetching = false;
const getData = () => {
  isFetching = true;
  controller = new AbortController();
  getAdminListApi(queryPramas, controller.signal)
    .then((res) => {
      if (res.code === 200) {
        tableData.value = res.data.list;
        total.value = res.data.total;
      }
    })
    .finally(() => {
      isFetching = false;
    });
};
getData();

// 通过监听 pageNum ， pageSize 进行数据的更换
// watch([()=>queryPramas.pageNum, ()=>queryPramas.pageSize], () => {
const { pageNum, pageSize } = toRefs(queryPramas);
watch([pageNum, pageSize], () => {
  // 判断是否已经正在请求
  if (isFetching) {
    // 取消上一次
    controller.abort();
  }
  // 重新发请求，渲染数据
  getData();
});

const search = () => {
  getData();
};

// 添加用户的逻辑
const showEditDialog = ref(false);
const add = () => {
  showEditDialog.value = true;
};
const closeEditDialog = (isReload?: Boolean) => {
  showEditDialog.value = false;
  // editId 归零
  editId.value = 0;
  if (isReload) {
    getData();
  }
};

const editId = ref(0);
const edit = (id: number) => {
  editId.value = id;
  showEditDialog.value = true;
};

// 用户分配角色相关逻辑
const showAllocRoleDialog = ref(false);
const allocRoleId = ref(0);
const allocRole = (id: number) => {
  allocRoleId.value = id;
  showAllocRoleDialog.value = true;
};
</script>
<style lang="less" scoped>
// Vue3里面修改了 深层修改组件库样式的api
:deep(.el-table__cell) {
  text-align: center;
}
.el-card {
  margin-bottom: 20px;
  font-size: 14px;
}
.page {
  padding: 20px 0;
  justify-content: flex-end;
}
</style>
